import React, { Component } from 'react'
import {Row, Col, Card, Icon } from 'antd'
// import chart1 from './chart1'
// import chart2 from './chart2'
import { fetchData } from '../../components/AjaxConsumer'
import $ from 'jquery'

import style from './index.scss'


export default class Welcome extends Component {
    constructor(props) {
        super(props);
        this.state={
            msg:"",
            materialDataAppoint:{
                appointInKdCount: 0,
                appointIningKdCount: 0,
                appointKdCount: 0,
                appointNotInKdCount: 0,
            },
            materialDataUnappoint:{
                unappointInKdCount: 0,
                unappointIningKdCount: 0,
                unappointKdCount: 0,
                unappointNotInKdCount: 0
            },
            materialDataJJ:{
                tInKdCount: 0,
                tIningKdCount: 0,
                tKdCount: 0,
                tNotInKdCount: 0,
            },
            materialDataCar:{
                carAheadCount: 0,
                carDelayCount: 0,
                carNormalCount: 0,
                carUnappointCount: 0,
                carUnarriveCount: 0,
            },
            productData:{
                assignList: [],
                carCount: 0,
                carWaitingCount: 0,
                carWorkingCount: 0,
                hasSendCount: 0,
                requireCount: 0,
                storageList: [],
                waitingSendCount: 0,
                waybillCount: 0,
                waybillFinishCount: 0,
                waybillWaitingCount: 0,
                waybillWorkingCount: 0,
                whAgeList: 0,
                wlCodeList: []
            }
        }
    }
    componentWillMount() {
        // (function($){
            $.fn.numberRock=function(options){
                var defaults={
                    speed:24,
                    count:10
                };
                var opts=$.extend({}, defaults, options);

                var div_by = 100,
                count=opts["count"],
                speed = Math.floor(count / div_by),
                sum=0,
                $display = this,
                run_count = 1,
                int_speed = opts["speed"];
                var int = setInterval(function () {
                    if (run_count <= div_by&&speed!=0) {
                        $display.text(sum=speed * run_count);
                        run_count++;
                    } else if (sum < count) {
                        $display.text(++sum);
                    } else {
                        clearInterval(int);
                    }
                }, int_speed);
            }
        // })(jQuery);
        // this.getMaterialData();
        // this.getProductData();
    }

    // 获取原材料数据
    getMaterialData=()=>{
        // 预约
        const option1= {
            url: '/wmsrest/main/materialInfo/appointment',
            type: 'post'
        };
        fetchData(this, option1, (resData) => {
            $(".appointKdCount").numberRock({
                speed:10,//数字越大数字滚动速度越慢
                count:resData.data.appointKdCount//最终停留数字
            });
            $(".appointInKdCount").numberRock({
                speed:15,
                count:resData.data.appointInKdCount
            });
            $(".appointNotInKdCount").numberRock({
                speed:20,
                count:resData.data.appointNotInKdCount
            });
            $(".appointIningKdCount").numberRock({
                speed:20,
                count:resData.data.appointIningKdCount
            });
           
            // 免预约
            const option2= {
                url: '/wmsrest/main/materialInfo/unappointment',
                type: 'post'
            };
            fetchData(this, option2, (resData) => {
                $(".unappointKdCount").numberRock({
                    speed:10,//数字越大数字滚动速度越慢
                    count:resData.data.unappointKdCount//最终停留数字
                });
                $(".unappointInKdCount").numberRock({
                    speed:15,
                    count:resData.data.unappointInKdCount
                });
                $(".unappointNotInKdCount").numberRock({
                    speed:20,
                    count:resData.data.unappointNotInKdCount
                });
                $(".unappointIningKdCount").numberRock({
                    speed:20,
                    count:resData.data.unappointIningKdCount
                });
            });
    
            // 看单交接
            const option3= {
                url: '/wmsrest/main/materialInfo/jj',
                type: 'post'
            };
            fetchData(this, option3, (resData) => {
                $(".tKdCount").numberRock({
                    speed:10,//数字越大数字滚动速度越慢
                    count:resData.data.tKdCount//最终停留数字
                });
                $(".tInKdCount").numberRock({
                    speed:15,
                    count:resData.data.tInKdCount
                });
                $(".tNotInKdCount").numberRock({
                    speed:20,
                    count:resData.data.tNotInKdCount
                });
                $(".tIningKdCount").numberRock({
                    speed:20,
                    count:resData.data.tIningKdCount
                });
            });
        });


        // 车辆
        const option4= {
            url: '/wmsrest/main/materialInfo/car',
            type: 'post'
        };
        fetchData(this, option4, (resData) => {
            this.setState({materialDataCar:resData.data});
            this.renderCarChart();
        });
        
    }
    // 渲染原材料车辆
    renderCarChart=()=>{
        let carChart = echarts.init(document.getElementById('barChart'));
        
        const option = {
            color: ['#3398DB'],
            tooltip : {
                trigger: 'axis',
                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            grid: {
                left: '0',
                right: '0',
                bottom: '3%',
                top:'10%',
                containLabel: true
            },
            xAxis : [
                {
                    type : 'category',
                    data : ['按时', '提前', '应到\n未到', '延期', '免预约'],
                    axisTick: {
                        alignWithLabel: true
                    },
                    axisLabel: {
                        textStyle:{
                            color: 'rgb(102, 102, 102)',
                            fontWeight:'normal',
                            fontSize: 12,
                            fontFamily:"Microsoft YaHei"
                        },
                        // showMaxLabel: true,
                        // showMinLabel: true,
                        // rotate: -45,
                    },
                }
            ],
            yAxis : [
                {
                    type : 'value',
                    interval: 20,
                    axisLabel: {
                        textStyle:{
                            color: 'rgb(102, 102, 102)',
                            fontWeight:'100',
                            fontFamily:'Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif;'
                        }
                    },
                }
            ],
            series : [
                {
                    name:'车辆情况',
                    type:'bar',
                    barWidth: '60%',
                    itemStyle: {
                        normal: {
                            color: 'rgb(53,167,255)'
                        }
                    },
                    data:[
                          this.state.materialDataCar.carNormalCount,
                          this.state.materialDataCar.carAheadCount, 
                          this.state.materialDataCar.carUnarriveCount, 
                          this.state.materialDataCar.carDelayCount, 
                          this.state.materialDataCar.carUnappointCount
                        ]
                }
            ]
        };
   
        carChart.setOption(option);
        window.onresize = carChart.resize;
    }

    // 获取成品数据
    getProductData=()=>{
        const options= {
            url: '/wmsrest/main/productInfo',
            type: 'post'
        };
        fetchData(this, options, (resData) => {
            console.log(resData);
            this.setState({productData:resData.data});
            this.renderStorageChart();
        });
    }

    // 渲染库存图表
    renderStorageChart=()=>{
        let storageChart = echarts.init(document.getElementById('barChart2'));
        const option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    crossStyle: {
                        color: '#999'
                    }
                }
            },
            toolbox: {
                feature: {
                    dataView: {show: true, readOnly: false},
                    magicType: {show: true, type: ['line', 'bar']},
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            legend: {
                data:['库存量','分配量']
            },
            grid:{
                bottom: '30px',
            },
            xAxis: [
                {
                    type: 'category',
                    data: this.state.productData.wlCodeList,
                    axisPointer: {
                        type: 'shadow'
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: '库存量',
                    // min: 0,
                    // max: 1400,
                    // interval: 200,
                    axisLabel: {
                        formatter: '{value}'
                    }
                },
                {
                    type: 'value',
                    name: '分配量',
                    // min: 0,
                    // max: 1400,
                    // interval: 200,
                    axisLabel: {
                        formatter: '{value}'
                    }
                }
            ],
            series: [
                {
                    name:'库存量',
                    type:'bar',
                    itemStyle: {
                        normal: {
                            color: 'rgb(53,167,255)'
                        }
                    },
                    data:this.state.productData.storageList
                },
                {
                    name:'分配量',
                    type:'bar',
                    itemStyle: {
                        normal: {
                            color: 'rgb(255,162,0)'
                        }
                    },
                    data:this.state.productData.assignList
                }
            ]
        };
        storageChart.setOption(option);        
        window.onresize = storageChart.resize;
    }


    
    componentDidMount() {
        // chart1();
        // chart2();
        // $(".ljyds").numberRock({
        //     speed:30,//数字越大数字滚动速度越慢
        //     count:50//最终停留数字
        // })
        // $(".ywcyds").numberRock({
        //     speed:30,
        //     count:20
        // })
        // $(".zzzyyds").numberRock({
        //     speed:30,
        //     count:10
        // })
        // $(".dzyyds").numberRock({
        //     speed:30,
        //     count:20
        // })
        // $(".zxq").numberRock({
        //     speed:30,
        //     count:5000
        // })
        // $(".ywcfhs").numberRock({
        //     speed:30,
        //     count:2000
        // })
        // $(".dfhs").numberRock({
        //     speed:30,
        //     count:3000
        // })
    }
    
    render() {
        let msg=this.state.msg;
        const span5 = 6;
        const gutterBox = {
            // background: '#00A0E9',
            cursor:'default',
            padding:'5px 0 20px',
        }
        const blueBlock = {
            color: 'rgb(108,81,179)',width:'45%', height: '40%',padding:'5px 0', margin:'5px',float:'left',backgroundColor: 'rgb(218,227,233)'
        }
        return(
            <div className={style.loading}>
                <div>
                    <h4 className={style.mainTxt}> 欢迎使用WMS管理系统</h4>
                    <h3 className={style.shineTxt}>Welcome</h3>
                </div> 
            </div>
            // <div style={{backgroundColor:'#ffffff', padding:'8px 32px 8px', height:'100%'}}>
            //     <Row style={{height:'8%'}}>
            //         <h1 style={{fontSize:'12px',marginLeft:'-16px',fontWeight:'bold'}}>原材料预约信息</h1>
            //     </Row>
            //     <Row style={{height:'30%'}} type="flex" justify="space-around">
            //         <Col style={gutterBox} span={span5}>
            //             <h2 style={{color: 'rgb(108,81,179)', fontSize:'12px'}}><Icon type="copy" /> 预约看单</h2>
            //             <div style={{width:'100%', height:'100%'}}>
            //                 <div className='center-center-column' style={blueBlock}>
            //                     <p className='appointKdCount' style={{fontSize:'20px',fontWeight:'bold'}}><span>{this.state.materialDataAppoint.appointKdCount}</span></p>
            //                     <p style={{color:'#666'}}>看单总数</p>
            //                 </div>
            //                 <div className='center-center-column' style={blueBlock}>
            //                     <p className='appointInKdCount' style={{fontSize:'20px',fontWeight:'bold'}}>{this.state.materialDataAppoint.appointInKdCount}</p>
            //                     <p style={{color:'#666'}}>已收看单</p>
            //                 </div>
            //                 <div className='center-center-column' style={blueBlock}>
            //                     <p className='appointNotInKdCount' style={{fontSize:'20px',fontWeight:'bold'}}>{this.state.materialDataAppoint.appointNotInKdCount}</p>
            //                     <p style={{color:'#666'}}>未收看单</p>
            //                 </div>
            //                 <div className='center-center-column' style={blueBlock}>
            //                     <p className='appointIningKdCount' style={{fontSize:'20px',fontWeight:'bold'}}>{this.state.materialDataAppoint.appointIningKdCount}</p>
            //                     <p style={{color:'#666'}}>收货中</p>
            //                 </div>
            //             </div>
            //         </Col>
            //         <Col style={gutterBox} span={span5}>
            //             <h2 style={{color: 'rgb(108,81,179)', fontSize:'12px'}}><Icon type="copy" /> 免预约看单</h2>
            //             <div style={{width:'100%', height:'100%'}}>
            //                 <div className='center-center-column' style={blueBlock}>
            //                     <p className='unappointKdCount' style={{fontSize:'20px',fontWeight:'bold'}}>{this.state.materialDataUnappoint.unappointKdCount}</p>
            //                     <p style={{color:'#666'}}>看单总数</p>
            //                 </div>
            //                 <div className='center-center-column' style={blueBlock}>
            //                     <p className='unappointInKdCount' style={{fontSize:'20px',fontWeight:'bold'}}>{this.state.materialDataUnappoint.unappointInKdCount}</p>
            //                     <p style={{color:'#666'}}>已收看单</p>
            //                 </div>
            //                 <div className='center-center-column' style={blueBlock}>
            //                     <p className='unappointNotInKdCount' style={{fontSize:'20px',fontWeight:'bold'}}>{this.state.materialDataUnappoint.unappointNotInKdCount}</p>
            //                     <p style={{color:'#666'}}>未收看单</p>
            //                 </div>
            //                 <div className='center-center-column' style={blueBlock}>
            //                     <p className='unappointIningKdCount' style={{fontSize:'20px',fontWeight:'bold'}}>{this.state.materialDataUnappoint.unappointIningKdCount}</p>
            //                     <p style={{color:'#666'}}>收货中</p>
            //                 </div>
            //             </div>
            //         </Col>
            //         <Col style={gutterBox} span={span5}>
            //             <h2 style={{color: 'rgb(108,81,179)', fontSize:'12px'}}><Icon type="copy" /> 看单交接</h2>
            //             <div style={{width:'100%', height:'100%'}}>
            //                 <div className='center-center-column' style={blueBlock}>
            //                     <p className='tKdCount' style={{fontSize:'20px',fontWeight:'bold'}}>{this.state.materialDataJJ.tKdCount}</p>
            //                     <p style={{color:'#666'}}>看单总数</p>
            //                 </div>
            //                 <div className='center-center-column' style={blueBlock}>
            //                     <p className='tInKdCount' style={{fontSize:'20px',fontWeight:'bold'}}>{this.state.materialDataJJ.tInKdCount}</p>
            //                     <p style={{color:'#666'}}>已交接</p>
            //                 </div>
            //                 <div className='center-center-column' style={blueBlock}>
            //                     <p className='tNotInKdCount' style={{fontSize:'20px',fontWeight:'bold'}}>{this.state.materialDataJJ.tNotInKdCount}</p>
            //                     <p style={{color:'#666'}}>未交接</p>
            //                 </div>
            //                 <div className='center-center-column' style={blueBlock}>
            //                     <p className='tIningKdCount' style={{fontSize:'20px',fontWeight:'bold'}}>{this.state.materialDataJJ.tIningKdCount}</p>
            //                     <p style={{color:'#666'}}>收货中</p>
            //                 </div>
            //             </div>
            //         </Col>
            //         <Col style={gutterBox} span={span5}>
            //             <h2 style={{color: 'rgb(108,81,179)', fontSize:'12px'}}><Icon type="car" /> 车辆情况</h2>
            //             <div className='center-center-column' style={{height:'87%',margin:'5px',width:'100%',backgroundColor: 'rgb(218,227,233)'}}>
            //                 <div id='barChart' style={{width: '100%', height: '100%'}}></div>
            //             </div>
            //         </Col>
            //     </Row>
            //     <Row style={{height:'8%'}}>
            //         <h1 style={{fontSize:'12px',marginLeft:'-16px',fontWeight:'bold'}}>成品发货信息</h1>
            //     </Row>
            //     <Row style={{height:'54%'}} type="flex" justify="space-around">
            //         <Col span={11}>
            //             <div style={{overflow:'hidden',height:'38%',fontSize:'12px',color: '#666',}}>
            //                 <h2 style={{height:'20%',color: 'rgb(108,81,179)'}}><Icon type="car" /> 车辆情况</h2>
            //                 <div style={{height:'80%'}}>
            //                     <div style={{float:'left',width:'25%',height:'100%',display: 'flex', flexDirection: 'row', alignItems: 'center',justifyContent: 'center'}}>
            //                         <div style={{border:'6px solid #eaf6ff',float:'left', borderRadius:'50%',}}>
            //                             <div style={{border:'6px solid #b3deff', width:'80px', height:'80px',textAlign:'center',lineHeight:'70px', borderRadius:'50%', backgroundColor:'#35a7ff'}}>
            //                                 <span style={{color:'#ffffff',fontSize:'26px'}}>{this.state.productData.carCount}</span>
            //                                 <span style={{color:'#ffffff'}}> 辆</span>
            //                             </div>
            //                         </div>
            //                        </div>
            //                     {/*<div style={{float:'left',textAlign:'center',height:'100%', width:'25%',}} className='center-center-column'>
            //                         <p><span style={{fontSize:'26px',color:'#1ac38a'}}>x</span> 辆</p>
            //                         <p>已完成</p>
            //                     </div>*/}
            //                     <div style={{float:'left',textAlign:'center',height:'100%', width:'25%',}} className='center-center-column'>
            //                         <p><span style={{fontSize:'26px',color:'#37a7fb'}}>{this.state.productData.carWorkingCount}</span> 辆</p>
            //                         <p>正在作业</p>
            //                     </div>
            //                     {/*<div style={{float:'left',textAlign:'center',height:'100%', width:'25%',}} className='center-center-column'>
            //                         <p><span style={{fontSize:'26px',color:'#ccc06e'}}>{this.state.productData.carWaitingCount}</span> 辆</p>
            //                         <p>正在排队</p>
            //                     </div>*/}
            //                 </div>
            //             </div>
            //             <div style={{overflow:'hidden',height:'62%'}}>
            //                 <h2 style={{height:'40px',lineHeight:'40px',color: 'rgb(108,81,179)',fontSize:'12px'}}><Icon type="file" /> 运单情况</h2>
            //                 <div style={{width:'100%',height:'35%'}}>
            //                     <div style={{float:'left',width:'25%',backgroundColor:'#37a6ff',height:'100%', color:'#ffffff'}} className='center-center-column'>
            //                         <p><span className='ljyds' style={{fontSize:'24px'}}>{this.state.productData.waybillCount}</span> 单</p>
            //                         <p style={{fontSize:'12px'}}>累计运单数</p>      
            //                     </div>
            //                     <div style={{float:'left',width:'25%',backgroundColor:'#58b6ff',height:'100%', color:'#ffffff'}} className='center-center-column'>
            //                         <p><span className='ywcyds' style={{fontSize:'24px'}}>{this.state.productData.waybillFinishCount}</span> 单</p>
            //                         <p style={{fontSize:'12px'}}>已完成运单数</p>      
            //                     </div>
            //                     <div style={{float:'left',width:'25%',backgroundColor:'#74c3fe',height:'100%', color:'#ffffff'}} className='center-center-column'>
            //                         <p><span className='zzzyyds' style={{fontSize:'24px'}}>{this.state.productData.waybillWorkingCount}</span> 单</p>
            //                         <p style={{fontSize:'12px'}}>正在作业运单数</p>      
            //                     </div>
            //                     <div style={{float:'left',width:'25%',backgroundColor:'#97d1ff',height:'100%', color:'#ffffff'}} className='center-center-column'>
            //                         <p><span className='dzyyds' style={{fontSize:'24px'}}>{this.state.productData.waybillWaitingCount}</span> 单</p>
            //                         <p style={{fontSize:'12px'}}>待作业运单数</p>      
            //                     </div>
            //                 </div>
            //                 <div style={{width:'100%',height:'35%',marginTop:'15px'}}>
            //                     <div style={{float:'left',width:'33.33%',backgroundColor:'#16c489',height:'100%', color:'#ffffff'}} className='center-center-column'>
            //                         <p><span className='zxq' style={{fontSize:'24px'}}>{this.state.productData.requireCount}</span> 台</p>
            //                         <p style={{fontSize:'12px'}}>总需求</p> 
            //                     </div>
            //                     <div style={{float:'left',width:'33.33%',backgroundColor:'#39d39f',height:'100%', color:'#ffffff'}} className='center-center-column'>
            //                         <p><span className='ywcfhs' style={{fontSize:'24px'}}>{this.state.productData.hasSendCount}</span> 台</p>
            //                         <p style={{fontSize:'12px'}}>已完成发货数</p> 
            //                     </div>
            //                     <div style={{float:'left',width:'33.33%',backgroundColor:'#61deb4',height:'100%', color:'#ffffff'}} className='center-center-column'>
            //                         <p><span className='dfhs' style={{fontSize:'24px'}}>{this.state.productData.waitingSendCount}</span> 台</p>
            //                         <p style={{fontSize:'12px'}}>待发货数</p> 
            //                     </div>
            //                 </div>
            //             </div>
            //         </Col>
            //         <Col span={11}>
            //             <h2 style={{height:'8%',color: 'rgb(108,81,179)',fontSize:'12px'}}><Icon type="database" /> 成品库存</h2>
            //             <div id='barChart2' style={{width: '100%', height: '92%'}}></div>
            //         </Col>
            //     </Row>
            // </div>
        )
    }
}
